<template>
  <div class="InfoRetrieval">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="column" @click.native="jumpToInfoRetrievalChildPages('GroupUpdate')">
          <div class="columnImg">
            <img src="./images/GroupUpdate.png">
          </div>
          <div class="info">
            <div class="title title2">{{$t('route.GroupUpdate')}}</div>
            <div class="cont">{{$t('InfoRetrieval.column2.cont')}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="column" @click.native="jumpToInfoRetrievalChildPages('ServiceStatusUpdate')">
          <div class="columnImg">
            <img src="./images/ServiceStatusUpdate.png">
          </div>
          <div class="info">
            <div class="title title1">{{$t('route.ServiceStatusUpdate')}}</div>
            <div class="cont">{{$t('DataTools.column1.cont')}}</div>
            <div class="cont" style="white-space: pre">{{$t('DataTools.column1.cont1')}}</div>
            <div class="cont" style="white-space: pre">{{$t('DataTools.column1.cont2')}}</div>
            <div class="cont" style="white-space: pre">{{$t('DataTools.column1.cont3')}}</div>
            <div class="cont" style="white-space: pre">{{$t('DataTools.column1.cont4')}}</div>
            <div class="cont" style="white-space: pre">{{$t('DataTools.column1.cont5')}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "InfoRetrieval",
    methods: {
      jumpToInfoRetrievalChildPages(childPath) {
        this.$router.push({path: `/DataTools/${childPath}`})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .InfoRetrieval{
    padding: 20px 46px;
    .info{
      margin-top:30px;
      .title{
        font-family: OpenSansShin;
        cursor: pointer;
        position: absolute;
        top: 215px;
        left: 50%;
        margin-left: -90px;
        font-weight:bold;
        font-size:20px;
        /*width: max-content;*/
        width: 190px;
        padding: 5px;
        text-align:center;
      }
      .title1{
        /*color:#ff5b00;*/
        /*border:2px solid #ff5b00;*/
        color:#fff;
        border:2px solid #fff;
      }
      .title2{
        color:#fff;
        border:2px solid #fff;
      }
      .title3{
        color:#4dcfa3;
        border:2px solid #4dcfa3;
      }
      .cont{
        font-size:14px;
        color:#7c8694;
        line-height:28px;
        /*height:200px;*/
        overflow: hidden;
      }
    }
    .column{
      min-height: 608.4px;
      .columnImg{
        text-align:center;
        img{
          width:100%;
          height:256px;
          border:0;
        }
      }
    }
  }

</style>
